<template>
  <div class="column">
    <q-list class="col">
      <q-item-label
        :style="`color: ${color}`"
        class="q-ma-sm text-uppercase"
        header
        >{{ title }}</q-item-label
      >
      <q-item
        clickable
        v-ripple
        :active="selected == item.routeName"
        v-for="item in menus"
        :key="item.routeName"
        @click="onItemClick(item)"
        active-class="item-active"
      >
        <q-item-section class="q-ma-xs">{{ $t(item.label) }}</q-item-section>
        <q-item-section side v-if="item.icon">
          <q-icon :name="item.icon" color="sub" />
        </q-item-section>
      </q-item>
    </q-list>
    <q-space />
    <div
      class="user-avatar column items-center q-mb-lg"
      v-if="currentUser && !noAvatar"
      @mouseover="avatarMore = true"
      @mouseout="avatarMore = false"
      @click="gotoProfile"
    >
      <q-avatar size="108px">
        <q-img :src="currentUser.avatar">
          <transition name="fade">
            <div
              v-show="avatarMore"
              class="absolute-full text-subtitle2 flex flex-center no-pointer-events"
            >
              {{ $t('home.myChannel') }}
            </div>
          </transition>
        </q-img>
      </q-avatar>
      <div class="q-mt-md">{{ currentUser.name }}</div>
      <transition-group name="fade">
        <q-btn
          key="upload-btn"
          class="avatar-btn"
          style="top: 0px; right: 14px; color: #00b5bc"
          icon="mdi-upload"
          fab-mini
          v-show="avatarMore"
        />
        <q-btn
          key="share-btn"
          class="avatar-btn"
          style="top: 70px; right: 14px"
          icon="mdi-share"
          fab-mini
          v-show="avatarMore"
        />
      </transition-group>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, PropType } from 'vue';
import { PageLeftItem } from './PageLeftItem';
import { storeToRefs } from 'pinia';
import { useUserStore } from 'stores/user-store';
import { useRouter } from 'vue-router';

const props = defineProps({
  title: { type: String, default: '' },
  menus: { type: Array as PropType<PageLeftItem[]>, required: true },
  color: { type: String, default: '#00B5BC' },
  noAvatar: Boolean,
});
const emit = defineEmits(['onChange']);
const router = useRouter();
const selected = ref(props.menus[0].routeName);
const avatarMore = ref(false);
const { currentUser } = storeToRefs(useUserStore());
function onItemClick(item: PageLeftItem) {
  selected.value = item.routeName;
  emit('onChange', item);
}
function gotoProfile() {
  router.push({ name: 'ProfileHome' });
}
</script>
<style lang="sass" scoped>

.fade-enter-active
  animation: fade 0.5s

.fade-leave-active
  animation: fade 0.5s reverse

@keyframes fade
  0%
    opacity: 0

  100%
    opacity: 1

.user-avatar
  position: relative
  font-size: 16px
  .avatar-btn
    position: absolute
    background-color: #1c1c1c
    width: 36px
    height: 36px
    color: $sub
</style>
